<template>
	<div>
		<el-form :model="sendMail" :rules="rules" ref="ruleForm" class="demo-ruleForm">
			<div class="jijian_detail_wrap">
				<div class="h_w">
					<div class="h_c padding_left bgd_color font_size_t">
						寄件详情
					</div>
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<el-form-item label="快递公司" prop="expressCompanyId">
									<el-select v-model="sendMail.expressCompanyId" placeholder="请选择" size="small">
										<el-option v-for="item in expressCompanyList" :key="item.id" :label="item.name" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</div>
						</el-col>
						<el-col :span="6">
							<el-form-item label="运单号" prop="waybillNumber">
								<el-input v-model="sendMail.waybillNumber" placeholder="数字5-30位" size="small"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div class="h_w font_size_c">
					<div class="h_c padding_left border_btm">
						<img src="../../assets/images/bitian_icon.png" /> 寄件人信息
					</div>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="寄件人" prop="senderName">
								<el-input v-model="sendMail.senderName" placeholder="文字、字母1-30位" size="small"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="寄件人电话" prop="senderMobile">
								<el-input v-model="sendMail.senderMobile" placeholder="数字8-13位" size="small"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="寄件地址" prop="senderProvince">
								<VDistpicker :province="sendMailAdr.senderProvince" :city="sendMailAdr.senderCity" :area="sendMailAdr.senderArea" @province="onChangeProvince1" @city="onChangeCity1" @area="onChangeArea1">
								</VDistpicker>
							</el-form-item>
							<el-form-item label="寄件详细地址" prop="senderDetail">
								<el-input v-model="sendMail.senderDetail" placeholder="请输入详细地址（文字、数字1-50位）" size="small" style="width: 300px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div class="h_w font_size_c">
					<div class="h_c padding_left border_btm">
						<img src="../../assets/images/bitian_icon.png" />
						<span>收件人信息</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="收件人" prop="receiverName">
								<el-input v-model="sendMail.receiverName" placeholder="文字、字母1-30位" size="small"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="收件人电话" prop="receiverMobile">
								<el-input v-model="sendMail.receiverMobile" placeholder="数字8-13位" size="small"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="20">
							<el-form-item label="收件地址" prop="senderProvince">
								<VDistpicker :province="sendMailAdr.receiverProvince" :city="sendMailAdr.receiverCity" :area="sendMailAdr.receiverArea" @province="onChangeProvince2" @city="onChangeCity2" @area="onChangeArea2">
								</VDistpicker>
							</el-form-item>
							<el-form-item label="收件详细地址" prop="senderDetail">
								<el-input v-model="sendMail.receiverDetail" placeholder="请输入详细地址（文字、数字1-50位）" size="small" style="width: 300px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div class="h_w font_size_c">
					<div class="h_c padding_left border_btm">
						<img src="../../assets/images/bitian_icon.png" />
						<span>包裹信息</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="包裹类型" prop="mailType">
								<el-select v-model="sendMail.mailType" placeholder="请选择" size="small">
									<el-option v-for="item in packageTypeList" :key="item.name" :label="item.name" :value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="重量" prop="weight">
								<el-input v-model="sendMail.weight" placeholder="数字0-999.0，不含0" size="small" style="width: 200px"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="运费" prop="freight">
								<el-input v-model="sendMail.freight" placeholder="数字0-999.0，不含0" size="small" style="width: 200px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div class="print_btn_wrap">
					<el-button @click="confirmPrint('ruleForm')" type="primary">确认并打印面单</el-button>
				</div>
			</div>
		</el-form>
		<div id="subOutputRank-print" style="display: none;">
			<div v-html="printTemplate">
				
			</div>
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import VDistpicker from 'v-distpicker'
	export default {
		components: {
			VDistpicker,
		},
		data() {
			return {
				printTemplate: '', //打印的内容
				sendMailAdr: {
					province: '',
					city: '',
					district: ''
				},
				receiveAdr: {
					province: '',
					city: '',
					district: ''
				},
				sendMail: {
					expressCompanyId: '', //快递公司Id,
					waybillNumber: '', //运单号
					senderName: '', //寄件人姓名
					senderMobile: '', //寄件人电话
					senderProvince: '', //寄件地址 - 省份
					senderCity: '', //寄件地址 - 城市
					senderArea: '', //寄件地址 - 区县
					senderDetail: '', //寄件地址 - 详细地址
					receiverName: '', //收件人姓名
					receiverMobile: '', //收件人电话
					receiverProvince: '', //收件地址 - 省份
					receiverCity: '', //收件地址 - 城市
					receiverArea: '', //收件地址 - 区县
					receiverDetail: '', //收件地址 - 详细地址
					mailType: '', //包裹类型
					weight: '', //重量
					freight: '', //运费
				},
				packageTypeList: [], //包裹类型
				expressCompanyList: [], //快递公司
				siteList: [], //站点
				rules: {
					expressCompanyId: [{
						required: true,
						message: '请选择快递公司',
						trigger: 'change'
					}],
					waybillNumber: [{
						required: true,
						message: '请输入运单号',
						trigger: 'blur'
					}],
					senderName: [{
						required: true,
						message: '请输入寄件人姓名',
						trigger: 'blur'
					}],
					senderMobile: [{
						required: true,
						message: '请输入寄件人电话',
						trigger: 'blur'
					}],
					senderProvince: [{
						required: true,
						message: '请选择寄件地址 - 省份',
						trigger: 'change'
					}],
					senderDetail: [{
						required: true,
						message: '请输入寄件地址 - 详细地址',
						trigger: 'blur'
					}],
					receiverName: [{
						required: true,
						message: '请输入收件人姓名',
						trigger: 'blur'
					}],
					receiverMobile: [{
						required: true,
						message: '请输入收件人电话',
						trigger: 'blur'
					}],
					receiverProvince: [{
						required: true,
						message: '请选择收件地址 - 省份',
						trigger: 'change'
					}],
					receiverDetail: [{
						required: true,
						message: '请输入收件地址 - 详细地址',
						trigger: 'blur'
					}],
					mailType: [{
						required: true,
						message: '请输入选择包裹类型',
						trigger: 'change'
					}],
					weight: [{
						required: true,
						message: '请输入重量',
						trigger: 'blur'
					}],
					freight: [{
						required: true,
						message: '请输入运费',
						trigger: 'blur'
					}],
				}
			};
		},
		created() {
			this.getSelectData();
		},
		methods: {
			confirmPrint(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						that.apiPost("/api/backend/site/sender-mail/add", that.sendMail).then(res => {
							console.log('新增寄件res', res)
							if(res.code == 200) {
								that.$message({
									type: 'success',
									message: '添加 成功！'
								})
								that.Print(res.data.mailId)
							}
						})
					}
				});
			},
			fetchMianDan() {
				let that = this;
				that.apiGet("/api/help/eorder/send").then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '添加 成功！'
						})
						that.$router.push({
							name: '寄件管理'
						})
					}
				})
			},
			getSelectData() {
				let that = this;
				//包裹类型
				that.apiGet("/api/dict/package-type/list", '').then(res => {
					if(res.code == 200) {
						that.packageTypeList = res.data.items
					}
				})
				//快递公司
				that.apiGet("/api/dict/express-company/list", null).then(res => {
					if(res.code == 200) {
						that.expressCompanyList = res.data.companies
					}
				})
			},
			onChangeProvince1(data) {
				this.sendMail.senderProvince = data.value;
			},
			onChangeCity1(data) {
				this.sendMail.senderCity = data.value;
			},
			onChangeArea1(data) {
				this.sendMail.senderArea = data.value;
			},
			onChangeProvince2(data) {
				this.sendMail.receiverProvince = data.value;
			},
			onChangeCity2(data) {
				this.sendMail.receiverCity = data.value;
			},
			onChangeArea2(data) {
				this.sendMail.receiverArea = data.value;
			},
			Print(mailId) {
				let that = this;
				that.apiGet('/api/help/eorder/send?mailId=' + mailId).then(res => {
					if(res.code == 200) {
						if(res.data.ResultCode == 100 || res.data.ResultCode == 106) {
							that.printTemplate = res.data.PrintTemplate;
							setTimeout(function() {
								that.printContent();
							}, 1000)
						}else {
							that.$message({
								type: "info",
								message: res.data.ResultCode
							})
						}
					}
				})
			},
			printContent() {
				let subOutputRankPrint = document.getElementById('subOutputRank-print');
				console.log(subOutputRankPrint.innerHTML);
				let newContent = subOutputRankPrint.innerHTML;
				let oldContent = document.body.innerHTML;
				document.body.innerHTML = newContent;
				window.print();
				window.location.reload();
				document.body.innerHTML = oldContent;
				return false;
			},

		},
		mixins: [http]

	}
</script>
<style scoped>
	.padding_left {
		padding-left: 20px;
	}
	
	.jijian_detail_wrap .h_w {
		background: #fff;
		border-radius: 3px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	
	.jijian_detail_wrap .h_c {
		line-height: 40px;
	}
	
	.bgd_color {
		background: rgba(24, 144, 255, 1);
		color: #FFFFFF;
	}
	
	.jijian_detail_wrap .el-row {
		padding-left: 20px;
		padding-top: 20px;
	}
	
	.border_btm {
		border-bottom: 1px solid rgba(217, 217, 217, 1);
	}
	
	.font_size_t {
		font-size: 18px;
	}
	
	.font_size_c {
		font-size: 14px;
	}
	
	.h_w .el-input {
		width: 160px;
	}
	
	.h_w .detail_adr_wrap .el-input {
		width: 400px;
	}
	
	.print_btn_wrap {
		text-align: center;
		padding: 10px 0 50px;
	}
	
	.print_btn_wrap .el-button {
		font-size: 20px;
	}
	
	.jijian_detail_wrap .el-select {
		width: 130px;
	}
</style>
<style type="text/css">
	.distpicker-address-wrapper {
		display: inline-block;
	}
	
	.distpicker-address-wrapper select {
		height: 30px;
		font-size: 14px!important;
		padding: 0px!important;
	}
	
	.distpicker-address-wrapper {
		margin-bottom: -20px;
	}
</style>